class StrengthBar { 
    constructor(options){ 
        this.domElement = document.createElement("div");
		this.domElement.style.position = 'fixed';
		this.domElement.style.bottom = '40px';
		this.domElement.style.width = '50%';
		this.domElement.style.left = '50%';
		this.domElement.style.transform = 'translateX(-50%)';
		this.domElement.style.height = '15px';
		this.domElement.style.display = 'none';
		this.domElement.style.alignItems = 'center';
		this.domElement.style.justifyContent = 'center';
		this.domElement.style.zIndex = '1111';
		const barBase = document.createElement("div");
		barBase.style.background = '#aaa';
		barBase.style.width = '100%';
		barBase.style.minWidth = '100px';
		barBase.style.borderRadius = '10px';
		barBase.style.height = '15px';
		this.domElement.appendChild(barBase);
		const bar = document.createElement("div");
		bar.style.background = '#22a';
		bar.style.width = '0%';
		bar.style.borderRadius = '10px';
		bar.style.height = '100%';
		bar.style.width = '0';
		barBase.appendChild(bar);
		this.strengthBar = bar;

		this.power = 0;
		
		document.body.appendChild(this.domElement);
	
    }
    update() { 
		let vis = this.visible;
		console.log(vis);
        if(vis){ 
            this.power+=.01 ;
            this.strength = this.power;
        }else { 
            this.power=0 ;
            this.strength= 0
			
        }
    }   

    get strength(){ 
        return this.power
    }
    set strength(val){ 
        this.power = Math.max(0, Math.min(val, 1)) ;
        const percent  = this.power * 100 ;
      	console.log(percent);
        this.strengthBar.style.width = percent+'%' ;
    }

	set visible(val){ 
		this.domElement.style.display = val?'flex': 'none' ;

	}
	get visible(){ return  !(this.domElement.style.display === 'none')}


}

export { StrengthBar}